/*
 * @Description:
 * @Author: qingyang
 * @Date: 2023-06-26 15:24:40
 * @LastEditors: qingyang
 * @LastEditTime: 2023-07-06 17:35:12
 */

import { ref, onMounted, nextTick, onBeforeUnmount } from 'vue'
import Vditor from 'vditor'
import 'vditor/dist/index.css'
// const VDITOR_CDN = `https://cyszh-carbonmgr-${
//   import.meta.env.VUE_APP_ENV_TYPE === 'production' ? 'prod' : 'dev'
// }.bcebos.cloud.geely.com/cdn/vditor`;
const VDITOR_CDN = '/vditor'
export const useVditor = (props: any, emit: any) => {
  let instance: any
  const editorRef = ref()
  const vditorConfig: any = {
    cdn: VDITOR_CDN,
    hint: {
      emojiPath: VDITOR_CDN
    },
    themes: 'light',
    minHeight: 200,
    width: props.width,
    mode: 'ir',
    preview: {
      theme: {
        path: `${VDITOR_CDN}/dist/css/content-theme`
      },
      markdown: {
        codeBlockPreview: false,
        mathBlockPreview: false
      }
    },
    toolbar: props.isReadOnly
      ? []
      : [
          // 'emoji',
          'headings',
          'bold',
          'italic',
          // 'strike',
          'link',
          '|',
          'list',
          'ordered-list',
          'check',
          // 'outdent',
          // 'indent',
          '|',
          //   'quote',
          'line',
          // 'code',
          // 'inline-code',
          'insert-before',
          'insert-after',
          '|',
          // 'upload',
          //   'record',
          'table',
          '|',
          'undo',
          'redo',
          '|',
          'fullscreen'
          //   'edit-mode',
          //   {
          //     name: 'more',
          //     toolbar: [
          //       'both',
          //       'code-theme',
          //       'content-theme',
          //       'export',
          //       'outline',
          //       'preview',
          //       'devtools',
          //       'info',
          //       'help'
          //     ]
          //   }
        ],
    toolbarConfig: {
      pin: true
    },
    cache: {
      enable: true
    },
    value: props.content,
    after: () => {
      instance.setValue(props.content)
    },

    input(val: string) {
      emit('update:content', val)
      emit('change', val)
    },
    blur() {
      emit('blur')
    }
  }
  const init = () => {
    if (!instance) {
      instance = new Vditor(props.propId as string, vditorConfig)
    }
  }
  // 初始化
  onMounted(() => {
    nextTick(() => {
      init()
      if (props.isReadOnly) {
        setTimeout(() => {
          stopUse()
        }, 100)
      }
    })
  })
  // 销毁
  onBeforeUnmount(() => {
    instance?.destroy()
    instance = null
  })
  // 获取内容
  const getEditValue = () => {
    if (instance) {
      return instance.getValue()
    } else {
      instance = new Vditor(props.propId as string, vditorConfig)
      return instance.getValue()
    }
  }
  // 禁用
  const stopUse = () => {
    if (instance) {
      instance.disabled()
    } else {
      instance = new Vditor(props.propId as string, vditorConfig)
      instance.disabled()
    }
  }
  const setEditValue = (val: string) => {
    if (instance) {
      instance.setValue(val, true)
    } else {
      instance = new Vditor(props.propId as string, vditorConfig)
    }
  }
  return {
    getEditValue,
    setEditValue,
    stopUse,
    editorRef
  }
}
